import React, {useState, useEffect, createContext} from 'react';
import {connect} from 'dva';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Button,
  Table,
  Modal,
  message,
  Select,
  Spin,
  DatePicker,
  Tooltip,
  Divider,
  Upload
} from 'antd';
import request from '@/utils/request';
import dynamic from 'umi/dynamic';
import LoadingComponent from '@/components/PageLoading/index';
const {Option} = Select;
const {info} = Modal
const FormItem = Form.Item;
const {TextArea} = Input;

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 8},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 14},
  },
};

const formItemLayoutOne = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 4},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 19},
  },
};

const textAreaFormItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 4},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 19},
  },
};

const cellStyle = {
  maxWidth: 200,
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  cursor: 'pointer'
}

// 判断空对象
const judgeObj = obj => {
  if (Object.keys(obj).length == 0) return true;
  else return false;
};

// const DealTacheSelect = dynamic({
//   loader: () => import('@/pages/Common/Flow/DealTacheSelect'),
//   Loading: LoadingComponent,
// });

// const SelectProjectPage = dynamic({
//   loader: () => import('../../../../Common/SelectProjectPage'),
//   loading: LoadingComponent,
// });

// const SelectProd = dynamic({
//   loader: () => import('@/pages/Common/Prod/SelectProd'),
//   loading: LoadingComponent,
// });

// const FileUpload = dynamic({
//   loader: () => import('@/pages/Form/Common/FileUpload'),
//   loading: LoadingComponent,
// });


const namespace = 'afterSale';


function FunctionConfApply(props) {
  const {getFieldDecorator} = props.form;
  const [reqDescriptionSize, setReqDescriptionSize] = useState(0);
  const [fileData, setFileData] = useState([]);
  const [fileTypeList, setFileTypeList] = useState([]);
  const [typeList, setTypeList] = useState([]);
  const [isCustDeployList, setIsCustDeployList] = useState([]);
  const [inputDisabled,setInputDisabled] = useState(false);
  const [formRef, setTacheForm] = useState(null);
  const [type,setType] = useState("");
  const [selectProjectFlag,setSelectProjectFlag] = useState(false);
  const [selectProject,setSelectProject] = useState({});
  const [selectProdModalVisible, setSelectProdModalVisible] = useState(false);
  const [handleUploadFlag, setHandleUploadFlag] = useState(false);

  useEffect(()=>{
    // if (!judgeObj(selectProject)){
    //   props.form.setFieldsValue({
    //     projectName: selectProject[0].projectName,
    //     projectCode: selectProject[0].projectCode,
    //     projectId:selectProject[0].projectId,
    //     custName:selectProject[0].custName
    //   });
    // }
  },[selectProject]);


  useEffect(() => {
    // if (!judgeObj(props.selectRecord)){
      // request('/project/FormFunctionConfController/queryFormDataById.do', {
      //     data: {
      //       id: props.selectRecord.id
      //     }
      //   }
      // ).then(res => {
      //   props.form.setFieldsValue({
      //     projectName: res.projectName,
      //     projectCode: res.projectCode,
      //     id: res.id,
      //     projectId: res.projectId,
      //     taskName: res.taskName,
      //     custName: res.custName,
      //     industy: res.industy,
      //     taskCode: res.taskCode,
      //     taskType: res.taskType,
      //     supportType: res.supportType,
      //     createDate:res.createDate,
      //     createStaffName: res.createStaffName,
      //     createStaff: res.createStaff,
      //     phone: res.phone,
      //     type: res.type,
      //     prodId: res.prodId,
      //     prodName: res.prodName,
      //     isCustDeploy: res.isCustDeploy,
      //     budget: res.budget,
      //     projectTimeLimit: res.projectTimeLimit,
      //     reqDescription: res.reqDescription,
      //   });
      //   setReqDescriptionSize(res.reqDescription.length)
      // })
      // request('/project/FormIAfterSaleSupportController/getFileInfo.do', {
      //     data: {
      //       id: props.selectRecord.id,
      //       objType: "1502"
      //     }
      //   }
      // ).then(res => {
      //   setFileData(res);
      //   setTempFileData(res);
      // })
    // }
  },[props.selectRecord]);

  useEffect(() => {
    getTypeValuesList();
    // if (setCallBackMethod != null) {
    //   setCallBackMethod({submitData: submitData, clearData: clearData});
    // }
  }, []);

  useEffect(() => {
    if (formRef != null){
      props.setTempFormRef(formRef);
    }
  },[formRef]);

  const getTypeValuesList = () => {
    let tempFileTypeList = [{
      name: "评估报告",
      value: "1000"
    }, {
      name: "效益分析报告",
      value: "1100"
    }, {
      name: "其他",
      value: "1200"
    }];
    setFileTypeList(tempFileTypeList);

    let tempTypeList = [{
      name: "地市发起",
      value: "1000"
    }, {
      name: "产品经理发起",
      value: "1200"
    }, {
      name: "省集客运营室发起",
      value: "1300"
    }];
    setTypeList(tempTypeList);

    let tempIsCustDeployList = [{
      name: "是",
      value: "1"
    }, {
      name: "否",
      value: "0"
    }];
    setIsCustDeployList(tempIsCustDeployList);

    props.form.setFieldsValue({
      taskType: "售中售后支撑",
      supportType: "功能开发及配置需求申请单",
      createDate: (new Date).toLocaleDateString(),
      // createStaffName: user.userInfo.userName,
      // createStaff: user.userInfo.userId
    });
  };

  // const chooseProject = () => {
  //   setType("project");
  //   setSelectProjectFlag(true);
  // };

  // const chooseProd = () => {
  //   setSelectProdModalVisible(true);
  // }

  // const getchild = type => {
  //   if (type == "project"){
  //     return <SelectProjectPage
  //       selectProjectFlag={selectProjectFlag}
  //       setSelectProjectFlag = {selectProjectFlag => {setSelectProjectFlag(selectProjectFlag)}}
  //       selectProject = {selectProject}
  //       setSelectProject = {selectProject => {setSelectProject(selectProject)}}
  //     />
  //   }
  // };

  /**
   * 选择Prod模态框控制方法
   * @param flag
  */
  const handleSetSelectProdModalVisible = flag => {
    setSelectProdModalVisible(flag);
  };

  /**
     * 选中Prod
    */
  const handleOkSelectProd = prodData => {
    if (!judgeObj(prodData)) {
      props.form.setFieldsValue({
        prodId: prodData[0].prodId,
        prodName: prodData[0].prodName,
      });
    }
  }

  // 选择选择Prod回调的入参方法
  const SelectProdMethods = {
    handleSetModalVisible: handleSetSelectProdModalVisible,
    handleOkSetData: handleOkSelectProd
  };

  // /*上传附件*/
  // const saveHandleUploadFlag = flag => {
  //   setHandleUploadFlag(flag);
  // };

  // const saveFileData = info => {
  //     let data = info[0].response.resultObject;
  //     data.map(item => {
  //       item.fileType = item.fileSubType;
  //       item.createDate = (new Date()).toLocaleDateString();
  //       item.createStaffName = user.userInfo.userName;
  //     })
  //     fileData.push(data[0])
  //     setFileData(fileData);
  //     setTempFileData(fileData);
  // }

  // const uploadFileBackMethods = {
  //   saveHandleUploadFlag: saveHandleUploadFlag,
  //   saveFileData: saveFileData,
  // };

  const changeReqDescriptionSize = value => {
    setReqDescriptionSize(value.target.value.length);
  };

  const submitData = async (params) => {
    // try {
    //   const values = await props.form.validateFields();
    //   if (params.submitType == "submit") {
    //     const valuesRef = await params.tempFormRef.validateFields();
    //   }
    // } catch (error) {
    //   console.log(error)
    //   info({title: "请确认", content: ("请确认必填字段已填写！")});
    //   return;
    // }
    // let formData = props.form.getFieldsValue();
    // let dealTacheData = params.tempFormRef.getFieldsValue();
    // let submitFormData = Object.assign({}, formData);
    // submitFormData.createStaff = user.userInfo.userId;
    // if (params.submitType == "submit") {
    //   submitFormData.statusCd = "1200"
    // } else if (params.submitType == "save") {
    //   submitFormData.statusCd = "1000"
    // }
    // let fileDataList = fileData.length == 0 ? params.fileData : fileData;
    // let submitData = {submitFormData,dealTacheData,fileDataList}
    // let isSuccess;
    // await request('/project/FormFunctionConfController/addOrModifyFormData.do', {
    //   data: submitData
    // }).then(res => {
    //   if (res.resultCode && res.resultCode == 'TRUE') {
    //     clearData(params);
    //     isSuccess = true;
    //   } else {
    //     info({title: "提交失败", content: (res.resultMsg)});
    //     isSuccess = false;
    //   }
    // });
    // return isSuccess;
  };

  const clearData = (params) => {
    props.form.resetFields();
    params.tempFormRef.resetFields();
    getTypeValuesList();
    setFileData([]);
    setTempFileData([]);
  }

  const backToList = () => {
    const {goToStep} = props;
    goToStep(1);
  }

  return (
    <div>
      {<div style={{textAlign: "center"}}><h2>功能开发及配置需求申请单</h2></div>}
      <Card
        title="申请信息"
        bordered={false}
      >

        {
          <Form style={{marginBottom: 10}}>
            <Row>
              <Col span={16}>
                <FormItem label="项目名称" {...formItemLayoutOne}>
                  {getFieldDecorator('projectName', {
                    rules: [
                      {
                        required: true,
                        message: "请选择关联项目"
                      }
                    ]
                  })(
                    <Input.Search
                      readOnly
                      disabled={inputDisabled}
                      placeholder="请选择关联项目"
                      onSearch={() => {
                        chooseProject()
                      }}
                    />
                  )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label="项目编码" {...formItemLayout}>
                  {getFieldDecorator('projectCode', {
                    rules: [
                      {
                        required: true,
                        message: "项目编码不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={true}
                      placeholder="请输入项目编码"
                    />
                  )}
                </FormItem>
              </Col>
              <div style={{display: "none"}}>
                <Col span={16}>
                  <FormItem label="项目Id" {...formItemLayoutOne}>
                    {getFieldDecorator('projectId')(
                      <Input/>
                    )}
                  </FormItem>
                </Col>
              </div>
              <div style={{display: "none"}}>
                <Col span={16}>
                  <FormItem label="申请单Id" {...formItemLayoutOne}>
                    {getFieldDecorator('id')(
                      <Input/>
                    )}
                  </FormItem>
                </Col>
              </div>
            </Row>
            <Row>
              <Col span={16}>
                <FormItem label="申请单名称" {...formItemLayoutOne}>
                  {getFieldDecorator('taskName', {
                    rules: [
                      {
                        required: true,
                        message: "申请单名称不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={inputDisabled}
                    />
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem label="客户名称" {...formItemLayout}>
                  {getFieldDecorator('custName', {
                    rules: [
                      {
                        required: true,
                        message: "客户名称不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={true}
                      placeholder="请输入客户名称"
                    />
                  )}
                </FormItem>
              </Col>

              <Col span={8}>
                <FormItem label="行业分类" {...formItemLayout}>
                  {getFieldDecorator('industy')(
                    <Input
                      disabled={true}
                      placeholder="请输入行业分类"
                    />
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem label="申请单编号" {...formItemLayout}>
                  {getFieldDecorator('taskCode')(
                    <Input placeholder="系统自动生成" disabled/>
                  )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label="任务类型" {...formItemLayout}>
                  {getFieldDecorator('taskType', {
                    rules: [
                      {
                        required: true,
                        message: "任务类型不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={true}
                      placeholder="请输入任务类型"
                    />
                  )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label="支撑申请类型" {...formItemLayout}>
                  {getFieldDecorator('supportType', {
                    rules: [
                      {
                        required: true,
                        message: "支撑申请类型不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={true}
                      placeholder="请输入支撑申请类型"
                    />
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem label="申请发起时间" {...formItemLayout}>
                  {getFieldDecorator('createDate', {
                    rules: [
                      {
                        required: true,
                        message: "申请发起时间不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={true}
                      placeholder="请输入申请发起时间"
                    />
                  )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label="申请发起人" {...formItemLayout}>
                  {getFieldDecorator('createStaffName', {
                    rules: [
                      {
                        required: true,
                        message: "申请发起人不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={true}
                      placeholder="请输入申请发起人"
                    />
                  )}
                </FormItem>
              </Col>
              <div style={{display: "none"}}>
                <Col span={8}>
                  <FormItem label="申请发起人" {...formItemLayout}>
                    {getFieldDecorator('createStaff')(
                      <Input
                        disabled={true}
                      />
                    )}
                  </FormItem>
                </Col>
              </div>
              <Col span={8}>
                <FormItem label="联系电话" {...formItemLayout}>
                  {getFieldDecorator('phone', {
                    rules: [
                      {
                        required: true,
                        message: "联系电话不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={inputDisabled}
                      placeholder="请输入联系电话"
                    />
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                  <FormItem label="发起类型" {...formItemLayout}>
                    {getFieldDecorator('type', {
                    rules: [
                      {
                        required: true,
                        message: "发起类型不能为空"
                      }
                    ]
                  })(
                      <Select
                        placeholder="请选择发起类型"
                        style={{width: '100%'}}
                        showSearch
                        allowClear={true}
                        disabled={inputDisabled}
                      >
                        {typeList.length
                          ? typeList.map(item => {
                            return (
                              <Option value={item.value} key={item.value}>
                                {item.name}
                              </Option>
                            );
                          })
                          : null}
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem label="产品" {...formItemLayout}>
                    {getFieldDecorator('prodName', {
                    rules: [
                      {
                        required: true,
                        message: "请选择产品"
                      }
                    ]
                    })(
                      <Input.Search
                        readOnly
                        disabled={inputDisabled}
                        placeholder="请选择产品"
                        onSearch={() => {
                          chooseProd()
                        }}
                      />
                    )}
                  </FormItem>
                </Col>
                <div style={{display: "none"}}>
                  <Col span={8}>
                    <FormItem label="产品" {...formItemLayout}>
                    {getFieldDecorator('prodId', {
                      rules: [
                        {
                          required: true,
                          message: "产品不能为空"
                        }
                      ]
                    })(
                      <Input
                        disabled={inputDisabled}
                        placeholder="请输入产品"
                      />
                    )}
                    </FormItem>
                  </Col>
                </div>
                <Col span={8}>
                  <FormItem label="是否客户侧部署" {...formItemLayout}>
                    {getFieldDecorator('isCustDeploy', {
                    rules: [
                      {
                        required: true,
                        message: "是否客户侧部署不能为空"
                      }
                    ]
                  })(
                      <Select
                        placeholder="请选择是否客户侧部署"
                        style={{width: '100%'}}
                        showSearch
                        allowClear={true}
                        disabled={inputDisabled}
                      >
                        {isCustDeployList.length
                          ? isCustDeployList.map(item => {
                            return (
                              <Option value={item.value} key={item.value}>
                                {item.name}
                              </Option>
                            );
                          })
                          : null}
                      </Select>
                    )}
                  </FormItem>
                </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem label="客户预算（万元）" {...formItemLayout}>
                  {getFieldDecorator('budget', {
                    rules: [
                      {
                        required: true,
                        message: "客户预算不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={inputDisabled}
                      placeholder="请输入客户预算"
                    />
                  )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label="期望工期（天）" {...formItemLayout}>
                  {getFieldDecorator('projectTimeLimit', {
                    rules: [
                      {
                        required: true,
                        message: "期望工期不能为空"
                      }
                    ]
                  })(
                    <Input
                      disabled={inputDisabled}
                      placeholder="请输入期望工期"
                    />
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={16}>
                <FormItem label="需求描述" {...textAreaFormItemLayout}>
                  {getFieldDecorator('reqDescription', {
                    rules: [
                      {
                        required: true,
                        message: "需求描述不能为空"
                      }
                    ]
                  })(
                    <TextArea
                      autoSize={{minRows: 5,maxRows: 5}}
                      maxLength="2000"
                      placeholder="请输入需求描述"
                      disabled={inputDisabled}
                      onChange={changeReqDescriptionSize}
                    />
                  )}
                </FormItem>
              </Col>
              <Col span={5} style={{marginTop: "82px", marginLeft: "-20px"}}>
                <FormItem>
                  {<span>{reqDescriptionSize}/2000</span>}
                </FormItem>
              </Col>
            </Row>
          </Form>
        }
      </Card>
      <div>
        <Button onClick={backToList}>返回</Button>
      </div>
        {/* {
          inputDisabled ? null :  <DealTacheSelect selectRecord={props.selectRecord} setFormRef={ formRef => setTacheForm(formRef) }
                                                   flowCode="FORM_FUNCTION_CONF"/>
        } */}
        {/* {getchild(type)} */}
        {/* {selectProdModalVisible ? <SelectProd {...SelectProdMethods} modalVisible={selectProdModalVisible} /> : null } */}
    </div>
  );
}

export default connect(({}) => ({
}))(Form.create()(FunctionConfApply));

